<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<div class="layui-row out_box">
			<div class="layui-row layui-col-xs12 layui-col-sm8 layui-col-md8 right_box">
				<div class="right1">right1</div>
				<div class="layui-row right2">
					<div class="layui-col-xs12 layui-col-sm6 layui-col-md6 right2_right">
						right2_right
					</div>
					<div class="layui-col-xs12 layui-col-sm6 layui-col-md6 right2_left">
						right2_left
					</div>
				</div>
				<div class="right3">right3</div>
			</div>
			<div class="layui-row layui-col-xs12 layui-col-sm4 layui-col-md4 left_box">
				<div class="left1">left1</div>
				<div class="left2">left2</div>
				<div class="left3">left3</div>
			</div>
		</div>
	</body>
</html>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	.out_box{
		width: 1200px;
		margin: 0 auto;
		background-color: beige;
	}
	.right_box{
		/* background-color: aqua; */
		/* height: 600px; */
	}
	.left_box{
		/* background-color: green;
		height: 600px; */
	}
	@media(max-width:575px){
		.out_box{
			width: 100%;
		}
	}
	/* 等于md */
	@media(min-width:768px) and (max-width:991px){
		.out_box{
			width: 100%;
		}
	}
	/* 等于lg */
	@media(min-width:992px){
		.out_box{
			width: 992px;
		}
	}
	@media(min-width:768px) and (max-width:991px){
		.right2{
			width: 100%;
		}
	}
	.right1{
		background-color: powderblue;
		height: 600px;
		margin-top: 10px;
	}
	.right2{
		/* background-color: yellow; */
		/* height: 600px; */
		/* width: 100%; */
		margin-top: 10px;
	}
	.right2_right{
		background-color: deeppink;
		height: 600px;
	}
	.right2_left{
		background-color: yellowgreen;
		height: 600px;
	}
	.right3{
		background-color: goldenrod;
		margin-top: 10px;
		height: 600px;
	}
	.left1{
		background-color: lightpink;
		height: 600px;
		margin-top: 10px;
	}
	.left2{
		background-color: seagreen;
		height: 600px;
		margin-top: 10px;
	}
	.left3{
		background-color: thistle;
		margin-top: 10px;
		height: 600px;
	}
	
</style>